<template>
  <!-- 使用 el-container 当作外层容器 -->
  <el-container>
    <!-- 使用 el-header 充当顶栏容器 -->
    <el-header class="header">
      <!-- 使用 el-menu 实现导航菜单 -->
      <!-- 使用 default-active 属性绑定默认被选中的导航连接 -->
      <!-- 使用 mode 属性指定 导航栏的显示模式，默认是垂直排列的 -->
      <el-menu :default-active="activeIndex" mode="horizontal">
        <!-- 使用 el-menu-item 充当菜单项 -->
        <el-menu-item index="1">
          <router-link to="/">Home</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link to="/login">登录</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/about">About</router-link>
        </el-menu-item>
      </el-menu>
    </el-header>
    <!-- 使用 el-main 充当主要区域容器 -->
    <el-main>
      <router-view/>
    </el-main>
    <!-- 使用 el-footer 充当底栏容器 -->
    <el-footer class="footer"></el-footer>
  </el-container>
  
</template>

<script>
export default {
  name : "App",
  data(){
    return {
      activeIndex: '1' 
    }
  }
}
</script>

<style scoped>
.header {
  background: #dfdfdf ;
}
.footer {
  background: #dfdfdf ;
}
</style>
